<template>
	<view class="container">
		<custom-header :isHomepage="false"></custom-header>
		<text class="page-title">纪念文章管理</text>

		<view class="main-content">

			<view class="article-management-list">
				<view class="list-item" v-for="(item, index) in articleList" :key="item.id" @click="goToArticleEdit(item)">
					<view class="item-text-area">
						<text class="item-title">{{ item.title }}</text>
						<text class="item-info">
                            {{ item.content }}
                        </text>
					</view>
					<view class="list-item-btn">
						<text @click.stop="articleDeleteFun(item)">删除</text>
						<text style="margin-left: 10rpx;" @click.stop="goToArticleEdit(item)">编辑</text>
					</view>
				</view>
                <view class="empty-message">
					<text v-if="articleList.length == 0">暂无文章</text>
				</view>
			</view>
			<view class="record-count-pagination" v-if="articleList.length > 0">
				<button class="pagination-button" @click="changePages('prev')" :disabled="pageInfo.page == 1" v-if="totalPages > 1">上一页</button>
				<text>共有{{pageInfo.count}}条记录</text>
				<text class="pagination-text">{{pageInfo.page}}/{{totalPages}} 页</text>
				<!-- 上一页下一页 -->
				<button class="pagination-button" @click="changePages('next')" :disabled="pageInfo.page == totalPages" v-if="totalPages > 1">下一页</button>
			</view>

		</view>

		<button class="return-button" @click="handleReturnToManagement">返回管理纪念馆</button>
		<Footer></Footer>
	</view>
</template>

<script setup>
	import {
		onLoad, onShow
	} from '@dcloudio/uni-app'
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import CustomHeader from '@/components/header/index.vue'; // Adjust path as needed
	import Footer from '@/components/footer/index.vue'
	import {
		apiMuArticleList, 
		apiMuDelArticle
	} from '@/api/article'

	// 文章数据
	const articleList = ref([]);

	const totalRecords = ref(0) // Total records currently displayed
	const currentPage = ref(1); // Assuming current page is 1 based on image
	const pageSize = ref(10); // Assuming a page size (can be anything, affects totalPages calculation)
	const totalPages = computed(() => Math.ceil(totalRecords.value / pageSize.value)); // Calculate total pages
	const mu_id = ref()
	const pageInfo = ref({
		page_no: 1,
		page_size: 15
	})
	// 获取文章数据
	const getDataList = async () => {
		let obj = {
			mu_id: mu_id.value,
			...pageInfo.value
		}
		await apiMuArticleList(obj).then(res => {
			console.log(res)
			if (res.code == 1) {
				articleList.value = res.data.list
                pageInfo.value.count = res.data.total
			}
		}).catch(error => {
			console.log(error)
		})
	}

	

	// 去管理纪念馆
	const handleReturnToManagement = () => {
		console.log('Return to Memorial Management button clicked');
		uni.navigateBack({
			delta: 1
		});
	};

	// 去文章编辑
	const goToArticleEdit = (item) => {
		uni.navigateTo({
			url: '/pages/graveyardManage/article/edit?id=' + mu_id.value + '&articleId=' + item.id + '&type=edit'
		})
	}

    // 上一页下一页
	const changePages = (type) => {
		if (type === 'prev') {
			if (pageInfo.value.page > 1) {
				pageInfo.value.page--;
				getDataList()
			}
		}else{
			if (pageInfo.value.page < totalPages.value) {
				pageInfo.value.page++;
				getDataList()
			}
		}
	}

    // 删除
    const articleDeleteFun = (item) => {
        console.log(item)
        uni.showModal({
            title:'提示',
            content: '确定删除吗?',
            success: (res) => {
                if (res.confirm) {
                    apiMuDelArticle({id: item.id, mu_id: mu_id.value}).then(res => {
                        console.log(res)
                        if (res.code == 1) {
                            uni.showToast({
                                title: '删除成功',
                                icon: 'success'
                            })
                            getDataList()
                        }
                    }).catch(error => {
                        console.log(error)
                    })
                }
            }
        })
    }
	
	const setDataFromB = () => {
		getDataList()
	}

    onLoad(async (options) => {
		console.log(options)
		if (options.id) {
			mu_id.value = options.id
		}
		await getDataList()
	})
</script>

<style scoped>
	/* Scoped styles for this page */
	/* Reusing common styles from previous pages */
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #f5f5f5;
		/* Match background color */
		padding-bottom: 40rpx;
		/* Add some padding at the bottom */
		box-sizing: border-box;
		/* Include padding in height calculation */
	}


	/* Page Title */
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin-top: 40rpx;
		/* Space below banner */
		margin-bottom: 30rpx;
		/* Space above main content area */
		color: #333;
	}

	/* Main Content Area (White Card) */
	.main-content {
		background-color: #fff;
		/* White background */
		margin: 0 20rpx;
		/* Side margins */
		padding: 30rpx;
		/* Inner padding */
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		/* Subtle shadow */
		display: flex;
		flex-direction: column;
		/* No align-items: center here, content is left-aligned within card */
	}

	/* Article Management List Styles - Very similar to Guestbook List */
	.article-management-list {
		/* No specific styles needed here, children handle layout */
	}

	.list-item {
		display: flex;
		align-items: flex-start;
		/* Align items to the top */
		padding: 20rpx 0;
		/* Vertical padding */
		border-bottom: 1rpx dashed #eee;
		/* Dashed separator */
	}

	.list-item:last-child {
		border-bottom: none;
		/* No border for the last item */
		padding-bottom: 0;
		/* Remove bottom padding for the last item */
	}

	.item-text-area {
		flex: 1;
		/* Text area takes remaining space */
		display: flex;
		flex-direction: column;
		margin-right: 20rpx;
		/* Space before checkbox */
	}
	.list-item-btn{
		text{
			font-size: 24rpx;
		}
	}

	.item-title {
		font-size: 28rpx;
		/* Font size for the article title */
		font-weight: bold;
		/* Title is bold */
		color: #333;
		margin-bottom: 8rpx;
		/* Space below title */
		word-break: break-word;
		/* Break long words if needed */
		white-space: pre-wrap;
		/* Preserve line breaks if any */
	}

	.item-info {
		font-size: 24rpx;
		color: #666;
		/* Gray color for info line */
		word-break: break-word;
		/* Break long words if needed */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Number of lines to show */
        -webkit-box-orient: vertical;
	}

	.item-status {
		color: #4CAF50;
		/* Green color for status text */
	}



	

	

	/* Record Count and Pagination Styles - Copied from Guestbook Management */
	.record-count-pagination {
		display: flex;
		justify-content: center;
		/* Center the text */
		font-size: 26rpx;
		color: #666;
		/* Gray color */
		margin-top: 20rpx;
		/* Space above pagination */
	}

	.pagination-text {
		margin-left: 20rpx;
		/* Space between total count and pagination */
		color: red;
		/* Red color for current page / total pages */
	}


	/* Return Button Styles - Copied from Guestbook Management */
	.return-button {
		/* Gray/White button style */
		width: calc(100% - 40rpx);
		/* Take full width minus side padding of main content */
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		color: #333;
		/* Dark gray text */
		background-color: #e0e0e0;
		/* Light gray background */
		border: 1rpx solid #ccc;
		/* Subtle border */
		border-radius: 8rpx;
		text-align: center;
		margin-top: 30rpx;
		/* Space above button */
		margin-left: 20rpx;
		/* Align with main content left */
		margin-right: 20rpx;
		/* Align with main content right */
		margin-bottom: 0;
		/* No bottom margin before QR codes */
		display: flex;
		align-items: center;
		justify-content: center;
	}

    .empty-message{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pagination-button{
		margin: 0 10px;
		font-size: 20rpx;
	}
</style>